<template>
  <div class="hr-echarts4">
    <el-row>
      <div v-for="(item, index) in dataList" :key="index">
        <el-col :span="12" v-if="index === 0">
          <div class="item item1">
            <div class="mess">
              <div>{{ item.value }}</div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" v-if="index === 1">
          <div class="item item2">
            <div class="mess">
              <div>{{ item.value }}</div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" v-if="index === 2">
          <div class="item item3">
            <div class="mess">
              <div>{{ item.value }}</div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" v-if="index === 3">
          <div class="item item4">
            <div class="mess">
              <div>{{ item.value }}</div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="index === 4">
          <div class="item item5">
            <div class="mess">
              <div>{{ item.value }}</div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="16" v-if="index === 5">
          <div class="item item6">
            <div class="mess">
              <div>{{ item.value }}</div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取数据
    getData() {
      this.$get('/humanresources/getRegisteredCapital').then(res => {
        this.dataList = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  width: 100px;
  height: 100px;
  background-image: url('../../../assets/image/icon-hr-bg.png');
  background-repeat: no-repeat;
  position: relative;
  background-size: 100% 100%;

  .mess {
    position: relative;
    top: 28px;
    font-size: 14px;
    font-weight: 700;
  }
}

.item1 {
  left: 20%;
  .mess {
    color: #00ffff;
  }
}
.item2 {
  left: 0%;
  .mess {
    color: #FFDB76;
  }
}
.item3 {
  left: 60%;
  top: -15px;
  .mess {
    color: #fff;
  }
}
.item4 {
  left: 30%;
  top: 15px;
  .mess {
    color: #00cfff;
  }
}
.item5 {
  left: 0%;
  top: -60px;
  .mess {
    color: #78FFFF;
  }
}
.item6 {
  left: 5%;
  .mess {
    color: rgba(255, 195, 0, 1);
  }
}
</style>
